<template>
  <span style="margin-top: 25px">
    <span v-if="data.length < maxLen">
      <span
        class="tj"
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          color: props.color,
          fontSize: props.size,
        }"
        >{{ props.data }}</span
      >
    </span>
    <span v-else>
      <span
        :style="{
          fontFamily: store.styleInfo.fontFamily,
          color: props.color,
          fontSize: props.size,
        }"
        class="tj"
        >{{ showBtn ? sliceStr : props.data }}
        <span
          :style="{
            color: store.styleInfo.shmentColor,
            fontSize: props.size,
          }"
          class="btnWord"
          style="font-family: PingFangSC-Regular, PingFang SC"
          @click="showModel"
          >{{ showBtn ? tip : '收起' }}</span
        >
      </span>
    </span>
  </span>
  <t-dialog v-model:visible="textVisible" header="描述详情">
    <div
      class="tj text-body-item"
      :style="{
        fontFamily: store.styleInfo.fontFamily,
        color: store.styleInfo.fontColor,
      }"
    >
      {{ props.data }}
    </div>
  </t-dialog>
</template>

<script setup lang="ts">
// @ts-nocheck
import { computed, ref } from 'vue';
import { useProjectStore } from '@/store';

const textVisible = ref(false);
const store = useProjectStore();
const showBtn = ref(true);
const props = defineProps({
  tip: {
    type: String,
    default: '展开',
  },
  // 数据
  data: {
    type: String,
    default: '',
  },
  // 最大长度
  maxLen: {
    type: Number,
    default: 60,
  },
  color: {
    type: String,
  },
  size: {
    type: String,
  },
});
const showModel = () => {
  // textVisible.value = true;
  showBtn.value = !showBtn.value;
};
const sliceStr = computed(() => {
  if (props.data != null) {
    return props.data.substring(0, props.maxLen) + '...';
  }
  return '';
});
</script>

<style lang="less" scoped>
.btnWord {
  cursor: pointer;
  line-height: 30px;
}
.tj {
  font-family: SourceHanSerifCN;
  color: #333333;
  line-height: 28px;
  font-size: 18px;
}
.text-body-item {
  height: 340px;
  overflow: scroll;
}
:deep(.t-dialog__footer) {
  display: none;
}
</style>
